<template>
<section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'graphicbtns-show', (custormCurrent == custormIndex)?'drag active':'drag']">
        <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
        <div :class="['es-menu-group',`col-${custormItemData.params.rowtype=='1'?'3':custormItemData.params.rowtype=='2'?'4':'5'}`,`${custormItemData.style.btnstyle=='1'?'square':custormItemData.style.btnstyle=='2'?'arc':'circle'}`]" :style="{'background-color':custormItemData.style.bgcolor}">
            <div class="es-icon-col" v-for="(item, index) in custormItemData.data" :key="index">
                <div class="icon" style="">
                    <img v-if="custormItemData.params.choostype!=3"  :src="getPath(item.thumb.file_path)">
                </div>
                <div class="text" v-if="custormItemData.params.choostype!=2" :style="{'color':custormItemData.style.textcolor}">{{item.title}}</div>
            </div>
        </div>
       <div class="btn-edit-del" @click="delCurrent"><span class="btn-del icon iconfont icon-close"></span></div>
    </div>
</section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicbtns-show {
    .es-menu-group,.es-icon-group {
        padding-bottom: 18px;
        background: #fff;
        overflow: hidden;
    }
    .es-icon-group.col-5 .es-icon-col {
        width: 20%;
    }
    .es-menu-group .es-icon-col,.es-icon-group .es-icon-col {
        float: left;
        text-align: center;
        margin-top: 18px;
    }
    .es-icon-group .icon {
        position: relative;
        height: 36px;
    }
    .es-icon-group .icon i {
        font-size: 24px;
    }
    .es-icon-col .text {
        font-size: 10px;
    }
    .es-icon-group .es-icon-col .text {
        margin-top: 4px;
        font-size: 10px;
        color: #999;
    }
    .es-menu-group.col-3 .es-icon-col,.es-icon-group.col-3 .es-icon-col{
        width: 33.3%;
    }
    .es-menu-group.col-4 .es-icon-col,.es-icon-group.col-4 .es-icon-col{
        width: 25%;
    }
    .es-menu-group.col-5 .es-icon-col,.es-icon-group.col-5 .es-icon-col{
        width: 20%;
    }
    .es-menu-group .icon img {
        display: inline-block!important;
        height: 40px;
        width: 40px;
    }
    .es-icon-col .text {
        font-size: 10px;
    }
    .es-menu-group .es-icon-col .text {
        margin-top: 4px;
        font-size: 10px;
        color: #999;
        line-height: 1.5;
    }
    .es-menu-group.arc img {
        border-radius: 10px;
    }
    .es-menu-group.circle img {
        border-radius: 50%;
    }
    .es-icon-group .icon i {
        font-size: 24px;
    }
    .es-icon-group .icon .mark {
        position: absolute;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        left: 50%;
        top: 2px;
        background: #f55;
    }
}
</style>
